import { Button } from 'antd-mobile'
import NavigateBar from '../../components/navigatebar/NavigateBar'
import './HomeViewStyle.sass'
import { AddOutline } from 'antd-mobile-icons'
// import { useNavigate } from 'react-router'
import { useNavigate } from 'react-router-dom'
import { useEffect, useState } from 'react'
import { listApi, mapDataApi } from '../../api'
import type { ListDataItem } from '../../type/Request'
import ListItem from './components/listitem/ListItem'
import { useDispatch } from 'react-redux'
import { setMapData } from '../../store/HomeViewSlice'


function HomeView () {

  // #region 变量声明
  const navigate = useNavigate()
  const [ list, setList ] = useState<ListDataItem[]>([])
  const dispatch = useDispatch()
  // #endregion

  // #region 函数
  // 获取list
  const getList = async () => {
    try {
      const res = await listApi()
      console.log(res)
      if (res.data.status === 1) {
        setList(res.data.data.list)
      }
    } catch (error) {
      console.log(error)
    }
  }
  const getMapData = async () => {
    try {
      const res = await mapDataApi()
      console.log(res)
      if (res.data.status === 1) {
        dispatch(setMapData(res.data.data))
      }
    } catch (error) {
      console.log(error)
    }
  }
  // #endregion

  // #region Hooks
  useEffect(() => {
    getList()
    getMapData()
    // eslint-disable-next-line
  }, [])
  // #endregion

  return (
    <div className='home'>
      <NavigateBar title='我的接待申请' hasBack={ false } />
      <div className="tabbar"></div>
      <div className="search"></div>
      <div className="list">
        { list && list.map(item => <ListItem btnClick={() => console.log(111)} lookInfo={() => console.log(111)} key={ item.id } item={ item } />) }
      </div>
      <Button onClick={ () => navigate('/reception/info', { state: { new: true } }) } className='add_btn' color='primary' fill='solid'><AddOutline className='add_icon' /></Button>
    </div>
  )
}

export default HomeView
